<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<div class="header">宇宙无敌暴龙战士超市</div>
			<div class="menu">
				<div class="menu_li">
					<a href="cart3.html">首页(转场)</a>
				</div>
				<div class="menu_li">
					<a href="">全部产品</a>
				</div>
			</div>
			<div class="main">
				<div class="item" v-for="(item,index) in list" :key="index">
					<input type="checkbox" v-if="item.check" checked @click="checkBtn(index)">
					<input type="checkbox" v-else @click="checkBtn(index)">
					<img :src="item.imgSrc" />
					<div>
						<p>{{item.name}}</p>
						<p style="color: red;">{{item.price * item.number}}</p>
					</div>
					<div class="number">
						<button @click="min(index)">-</button>
						<input type="number" style="width: 40px;" v-model="item.number" />
						<button @click="add(index)">+</button>
					</div>
				</div>
			</div>
			<div class="footer">
				<input type="checkbox" v-if='allCheck == list.length' checked @click="checkAll" />
				<input type="checkbox" v-else @click="checkAll" />
				全选
				<p style="margin-left: 20px;">总数量: {{allNum}}</p>
				<p style="margin-left: 20px;">总价: {{allPrice}}</p>
			</div>
		</div>
	</body>
	<script src="vue.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				list: [{
					check: false,
					imgSrc: '../src/png/gz.jpg',
					name: '瓜子',
					price: '30',
					number: '1',
				}, {
					check: false,
					imgSrc:'../src/png/hs.jpg',
					name: '花生',
					price: '25',
					number: '1'
				}, {
					check: false,
					imgSrc: '../src/png/xgz.jpg',
					name: '西瓜子',
					price: '35',
					number: '1'
				}],
				allNum: 0,
				allPrice: 0,
				allCheck: 0
			},
			methods: {
				checkBtn(index) {
					this.list[index].check = !this.list[index].check;
					this.changeAllNum();
					this.changeAllPrice();
					this.changeAllCheck();
				},
				min(index) {
					if (this.list[index].number == 0){
						return
					}
					this.list[index].number--;
					this.changeAllNum();
					this.changeAllPrice();
				},
				add(index) {
					this.list[index].number++;
					this.changeAllNum();
					this.changeAllPrice();
				},
				changeAllCheck() {
					var num = 0;
					for (var i = 0; i < this.list.length; i++) {
						if (this.list[i].check == true) {
							num++
						}
					}
					this.allCheck = num;
				},
				checkAll(e) {
					if (e.target.checked == true) {
						for (var i = 0; i < this.list.length; i++) {
							this.list[i].check = true
						}
					} else {
						for (var i = 0; i < this.list.length; i++) {
							this.list[i].check = false
						}
					}
					this.changeAllNum();
					this.changeAllPrice();
				},
				changeAllNum() {
					var num = 0;
					for (var i = 0; i < this.list.length; i++) {
						if (this.list[i].check == true) {
							num += parseInt(this.list[i].number)
						}
					}
					this.allNum = num;
				},
				changeAllPrice() {
					var num = 0;
					for (var i = 0; i < this.list.length; i++) {
						if (this.list[i].check == true) {
							num += parseInt(this.list[i].number) * parseInt(this.list[i].price)
						}
					}
					this.allPrice = num;
				}
			}
		})
	</script>
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
		}

		.header {
			/* position: fixed;
			top: 0;
			 */
			height: 60px;
			line-height: 60px;
			color: white;
			background-color: rgb(255, 80, 0);
			text-align: center;
		}
		
		.menu_li{
			background: lightgrey;
			font-weight: 900;
			float: left;
			padding-left: 30%;
			height: 20px;		
		}
		
		
		.footer {
			position: fixed;
			bottom: 0;
			width: 100vw;
			height: 60px;
			background-color: rgb(255, 80, 0);
			display: flex;
			align-items: center;
		}

		.main {
			background-color: lightgray;
			height: 100vh;
			padding-top: 20px;
		}

		.main .item {
			display: flex;
			align-items: center;
			margin: 0 20px 20px 20px;
			border: 1px solid black;
			border-radius: 10px;
			background-color: white;
			box-sizing: border-box;
		}

		.main .item img {
			width: 80px;
			height: 80px;
			margin: 0 20px;
		}

		.main .item .number {
			display: flex;
			margin-left: 20px;
		}
	</style>
</html>
